<template>
  <div class="app-container">
    <!--    商品详情-->
    <el-card class="box-card">
      <h3>商品介绍</h3>
      <el-form ref="goods" :rules="rules" :model="goods" label-width="150px">
        <el-form-item label="商品简介" prop="brief">
          <el-input v-model="goods.brief"/>
        </el-form-item>

        <el-form-item label="商品名称" prop="name">
          <el-input v-model="goods.name"/>
        </el-form-item>

        <el-form-item label="专柜价格" prop="counterPrice">
          <el-input v-model="goods.counterPrice" placeholder="0.00">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="零售价格" prop="retailPrice">
          <el-input v-model="goods.retailPrice" placeholder="0.00">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="商品排序" prop="sortOrder">
          <el-input v-model="goods.sortOrder" placeholder=""/>
        </el-form-item>

        <el-form-item label="商品单位">
          <el-input v-model="goods.unit" placeholder="件 / 个 / 盒 / 桶 ..."/>
        </el-form-item>

        <el-form-item label="商品分类">
          <el-select v-model="goods.categoryId" clearable>
            <el-option v-for="item in brandList" :key="item.categoryId" :label="item.name" :value="item.categoryId"/>
          </el-select>
        </el-form-item>

        <el-form-item label="商品票种类">
          <el-select v-model="goods.type" clearable>
            <el-option v-for="item in typeOptions" :key="item.dictValue" :label="item.dictLabel"
                       :value="item.dictValue"/>
          </el-select>
        </el-form-item>

        <!--       多图 -->
        <el-form-item label="图片">
          <el-upload
            :action="uploadImgUrl"
            :limit="6"
            :headers="headers"
            :on-exceed="uploadOverrun"
            :on-success="handleGalleryUrl"
            :file-list="galleryFileList"
            :on-remove="handleRemove"
            multiple
            accept=".jpg,.jpeg,.png,.gif"
            list-type="picture-card"
          >
            <i class="el-icon-plus"/>
          </el-upload>
        </el-form-item>

        <el-form-item label="商品详情" style="height: 260px;">
          <Editor v-model="goods.detail"/>
        </el-form-item>

      </el-form>
    </el-card>

    <!--    商品规格-->
    <el-card class="box-card">
      <h3>商品规格</h3>
      <el-table :data="specifications">
        <el-table-column property="specification" label="规格名"/>
        <el-table-column property="value" label="规格值">
          <template slot-scope="scope">
            <el-tag type="primary">
              {{ scope.row.value }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="primary" size="normal" @click="handleSpecificationShow(scope.row)">设置</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog :visible.sync="specVisiable" title="设置规格">
        <el-form ref="specForm" :rules="rules" :model="specForm" status-icon label-position="left" label-width="100px"
                 style="width: 400px; margin-left:50px;">
          <el-form-item label="规格名" prop="specification">
            <el-input v-model="specForm.specification" disabled/>
          </el-form-item>
          <el-form-item label="规格值" prop="value">
            <el-input v-model="specForm.value" disabled/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="specVisiable = false">取消</el-button>
          <el-button type="primary" @click="handleSpecificationEdit">确定</el-button>
        </div>
      </el-dialog>
    </el-card>


    <!--    商品库存-->
    <el-card class="box-card">
      <h3>商品库存</h3>
      <el-table :data="products">
        <el-table-column property="value" label="货品规格">
          <template slot-scope="scope">
            <el-tag v-for="tag in scope.row.specifications" :key="tag">
              {{ tag }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column property="price" label="货品售价"/>
        <el-table-column property="number" label="货品数量"/>
        <el-table-column property="integral" width="100" label="货品积分兑换"/>
        <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="primary" size="normal" @click="handleProductShow(scope.row)">设置</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog :visible.sync="productVisiable" title="编辑货品">
        <el-form ref="productForm" :model="productForm" status-icon label-position="left" label-width="100px"
                 style="width: 400px; margin-left:50px;">
          <el-form-item label="货品规格列" prop="specifications">
            <el-tag v-for="tag in productForm.specifications" :key="tag">
              {{ tag }}
            </el-tag>
          </el-form-item>
          <el-form-item label="货品售价" prop="price">
            <el-input v-model="productForm.price"/>
          </el-form-item>
          <el-form-item label="货品数量" prop="number">
            <el-input v-model="productForm.number"/>
          </el-form-item>
          <el-form-item label="货品积分兑换" prop="integral">
            <el-input v-model="productForm.integral"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="productVisiable = false">取消</el-button>
          <el-button type="primary" @click="handleProductEdit">确定</el-button>
        </div>
      </el-dialog>
    </el-card>
    <!--    底部操作-->
    <div class="op-container">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleEdit">更新商品</el-button>
    </div>
  </div>
</template>

<script>
  import { getGoods, getcategoryList ,postUpdateGoods } from '@/api/goods'
  import { getToken } from '@/utils/auth'
  import Editor from '@/components/Editor'

  export default {
    components: { Editor },
    data() {
      return {
        goodsId: null,

        typeOptions: [], //1 电子水票 2 纸质水票  3水  typeOptions
        brandList: [],  //分类数组
        //商品简介
        goods: {
          type: null,
          brief: '',//商品简介
          categoryId: null,//所属种类
          counterPrice: null,//专柜价格
          delFla: '',//商品状态
          detail: '',//商品详情
          isOnSale: 1,//商品是否上下架
          name: '',//商品名称
          retailPrice: null,//零售价格
          sortOrder: null,//商品排序
          unit: ''//商品单位
        },
        rules: {
          // goodsSn: [{ required: true, message: '商品编号不能为空', trigger: 'blur' }],
          // name: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }]
        },
        uploadImgUrl: process.env.VUE_APP_BASE_API + '/common/upload', // 上传的图片服务器地址
        galleryFileList: [],
        headers: {
          Authorization: 'Bearer ' + getToken()
        },
        goodsImgs: [
          // {
          //   "imgUrl": "string"  //图片地址
          // }
        ],
        specVisiable: false,
        specForm: { specification: '', value: '' },
        multipleSpec: false,
        specifications: [{ specification: '规格', value: '标准' }],
        productVisiable: false,
        productForm: { id: 0, specifications: [], price: 0.00, number: 0, integral: 0 },   //设置进去添加货品对话框
        products: [{ id: 0, specifications: ['标准'], price: 0.00, number: 0, integral: 0 }],
        attributeVisiable: false,
        attributeForm: { attribute: '', value: '' },
        attributes: [],

        uploadPath: '',
        newKeywordVisible: false,
        newKeyword: '',
        keywords: [],
        categoryList: []

        // goods: { picUrl: '', gallery: [], isHot: false, isNew: true, isOnSale: true },

        // specVisiable: false,
        // specForm: { specification: '', value: '', picUrl: '' },
        // multipleSpec: false,
        // specifications: [{ specification: '规格', value: '标准', picUrl: '' }],
        // productVisiable: false,
        // productForm: { id: 0, specifications: [], price: 0.00, number: 0, url: '' },
        // products: [{ id: 0, specifications: ['标准'], price: 0.00, number: 0, url: '' }],
        // attributeVisiable: false,
        // attributeForm: { attribute: '', value: '' },
        // attributes: [],
      }
    },
    created(e) {
      this.goodsId = this.$route.params.goodsId

      getcategoryList().then(res => {
        console.log('查询分类列表', res)
        this.brandList = res.data
      })

      //1 电子水票 2 纸质水票  3水  typeOptions
      this.getDicts('sys_water_type').then(response => {
        this.typeOptions = response.data
      })

      //获取商品详情
      this.getGoods()
    },
    methods: {
      //获取单个商品详情  和方法对象赋值
      getGoods() {
        getGoods(this.goodsId).then(res => {
          var data = res.data.data
          console.log('单个商品详情', data)
          //数据回显   商品详情
          this.goods = data.goods
          //图片
          this.goodsImgs = data.sysGoodsImgs
          this.galleryFileList = []
          for (var i = 0; i < this.goodsImgs.length; i++) {
            console.log(process.env.VUE_APP_BASE_API)
            this.galleryFileList.push({
              name: this.goodsImgs[i].imgUrl,
              url: process.env.VUE_APP_BASE_API + this.goodsImgs[i].imgUrl
            })
          }
          // specifications
          this.specifications = data.sysGoodsSpecifications
          this.products = data.sysGoodsProducts
        })
      },
      //图片相关接口
      uploadOverrun: function() {
        this.$message({
          type: 'error',
          message: '上传文件个数超出限制!最多上传6张图片!'
        })
      },
      handleGalleryUrl(response, file, fileList) {
        // console.log(response, file, fileList)
        if (response.code === 200) this.goodsImgs.push({ imgUrl: response.fileName })

      },
      handleRemove: function(file, fileList) {
        for (var i = 0; i < this.goodsImgs.length; i++) {
          this.goodsImgs.splice(i, 1)
        }
      },

      //  商品规格相关
      handleSpecificationShow(row) {
        this.specForm = Object.assign({}, row)
        this.specVisiable = true
      },
      //  商品规格  确定
      handleSpecificationEdit() {
        this.specForm.updateTime = ''
        for (var i = 0; i < this.specifications.length; i++) {
          const v = this.specifications[i]
          if (v.id === this.specForm.id) {
            this.specifications.splice(i, 1, this.specForm)
            break
          }
        }
        this.specVisiable = false
      },
      //商品库存接口
      handleProductShow(row) {
        console.log(row)
        this.productForm = Object.assign({}, row)
        this.productVisiable = true
      },
      //  商品库存  确定
      handleProductEdit() {
        // this.productForm.updateTime = ''
        // for (var i = 0; i < this.products.length; i++) {
        //   const v = this.products[i]
        //   if (v.id === this.productForm.id) {
        //     this.products.splice(i, 1, this.productForm)
        //     break
        //   }
        // }
        // this.productVisiable = false



        this.productForm.updateTime = ''
        // console.log(this.products)
        // console.log( 'this.productForm.productId',this.productForm.productId)
        for (var i = 0; i < this.products.length; i++) {
          const v = this.products[i]
          if (v.productId === this.productForm.productId) {
            this.products.splice(i, 1, this.productForm)
            break
          }
        }
        this.productVisiable = false
      },
      //底部操作
      handleCancel: function() {
        this.$router.push({ path: '/goods/list' })
      },
      handleEdit: function() {
        var goodsProducts = this.products
        var goodsSpecifications = this.specifications
        if (goodsProducts.length>0){
          goodsProducts.forEach((items,i)=>{
            delete items.id
            delete items.productId
          })
        }
        if (goodsSpecifications.length>0){
          goodsSpecifications.forEach((items,i)=>{
            delete items.specificationId
          })
        }

        const finalGoods = {
          goods: this.goods,
          goodsImgs: this.goodsImgs,
          goodsProducts: goodsProducts,
          goodsSpecifications:goodsSpecifications
        }
        //postUpdateGoods
        postUpdateGoods(finalGoods).then(response => {
          if (response.code===200){
            this.$notify.success({
              title: '成功',
              message: '修改成功'
            })
            this.$router.push({ path: '/goods/list' })
          }

        })
      },
    }

  }
</script>

<
<style>
  .el-card {
    margin-bottom: 10px;
  }

  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .input-new-keyword {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }

  .avatar {
    width: 145px;
    height: 145px;
    display: block;
  }

  .op-container {
    display: flex;
    justify-content: center;
  }
</style>
